<template>
  <view>
  <!-- <uni-popup
      ref="popup"
      :type="popupType"
      :animation="animation"
      :is-mask-click ="isMaskClick"
      :mask-background-color="maskBgColor"
      :background-color="bgColor"
      :safe-area="safeArea"
      @maskClick="maskClick"
    >
      <view
        class="popup-content"
        :style="{ width: dialogWidth }"
      >
        <view class="title" v-if="showTitle">{{ popupTitle }}</view>
        <view class="content">
          <slot name="popupContent"></slot>
        </view>
        <view class="btn-box" v-if="showBtn">
          <view class="cancel-btn" @click="clickCancel">取消</view>
          <view class="confirm-btn" @click="clickConfirm">确认</view>
          <slot name="btnBox" v-if="btnSlot"></slot>
        </view>
      </view>
    </uni-popup> -->
	
	<u-popup :show="popupVisible" :mode="popupType" round="10" :closeable='false' :safeAreaInsetBottom='false'>
		<view class="popup-content" :style="{ width: dialogWidth }">
			<view class="flex">
				<view class=""></view>
				<view class="title"  v-if="showTitle">{{ popupTitle }}</view>
				<slot name="closeIcon"></slot>
			</view>
			<view class="content">
			  <slot name="popupContent"></slot>
			</view>
			<view class="btn-box flexJcac" v-if="showBtn">
			  <slot name="btnBox"></slot>
			</view>
			<slot name="message"></slot>
		</view>
		
	</u-popup>
	<!-- <u-button @click="show = true">打开</u-button> -->
  </view>
</template>

<script>
  export default {
    name: 'MobileProjectIndex',

    data() {
      return {
        show:false
      };
    },
    props: {
      popupVisible: {
        type: Boolean,
        default: false
      },
      dialogWidth: {
        type: String,
        default: '600rpx'
      },
      borderRadius: {
        type: String,
        default: '0'
      },
      popupType: {
        type: String,
        default: 'center'
      },
      showTitle: {
        type: Boolean,
        default: true
      },
      popupTitle: {
        type: String,
        default: '温馨提示'
      },
      animation: {
        type: Boolean,
        default: true
      },
      isMaskClick: {
        type: Boolean,
        default: true
      },
      maskBgColor: {
        type: String,
        default: 'rgba(0,0,0,0.4)'
      },
      bgColor: {
        type: String,
        default: 'none'
      },
      safeArea: {
        type: Boolean,
        default: true
      },
      showBtn: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      maskClick() {
        this.$emit('popupClose');
      },
      clickCancel() {
        this.$emit('cancel')
      },
      clickConfirm() {
        this.$emit('confirm')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup-content {
	  padding: 39rpx;
    .title {
      width: 100%;
      padding-bottom: 30rpx;
      text-align: center;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .btn-box {
      display: flex;
      align-items: center;
	    margin-top: 10rpx;
      .cancel-btn,
      .confirm-btn {
        width: 117rpx;
        height: 49rpx;
        opacity: 1;
        border-radius: 38rpx;
        background: #F5F4F4;
		    color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx 10rpx 10rpx 10rpx;
      }
      .confirm-btn {
        background-color: #C27E15;
        color: #fff;
      }
    }
  }
</style>